<template>
    <div class="caseLibrary warp">
      <div class="lots_type">
            <div class="table">
                <div class="tr_border">
                    <div class="td_type">
                        标的类型
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="typeAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="(value,i) in lotsTypeList" :key="i" @click="showLotsChildren(value.children,value.id,i)">
                                    <span :class='{stateFoucs:lotsLX==i}'>{{value.classname}}</span>
                                </li>
                            </ul>
                            <div v-show="typeAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="typeChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in lotsTypeListChildren" :key="i" @click="lotsTypeChild(val.id,i)">
                                        <span :class='{stateFoucs:lotsChildLX==i}'>{{val.classname}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        标的所在地
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="adressAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="(value,index) in areaList" :key="index" @click="showAreaChildren(value.children,value.id,index)">
                                    <span :class='{stateFoucs:lotsAreaStyle==index}'>{{value.name}}</span>
                                </li>
                            </ul>
                            <div v-show="adressAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="adressChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in areaListChildren" :key="i" @click="lotsAreaChild(val.id,i)">
                                        <span :class='{stateFoucs:AreaChildStyle==i}'>{{val.name}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <el-empty v-if="emptyShow" :description=description :image-size="300"></el-empty> 

        <div class="card" v-else> 
            <ul class="pai-item-list">
                <li v-for="(val,i) in lotsCardList" :key="i" class="pai-item">
                    <div class="link_wrap" @click="routeDetail(val)">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                            <el-image :src="imgurls+ val.image" alt="" class="lot_pic"></el-image>
                        </div>
                        
                        <div class="item_content">
                            <div class="item_title">
                                <div class="in_item_title">{{val.name}}</div>
                            </div>
                            <div class="item_money">
                            <p>
                                <span v-if="val.state=='1'||val.state=='4'||val.state=='6'">起拍价</span>
                                <span v-if="val.state=='2'">当前价</span>
                                <span v-if="val.state=='3'">成交价</span>

                                <span v-if="val.state=='2'||val.state=='3'||val.state=='5'" class="red moneyBig">{{val.prices| formatNumber}}元</span>
                                <span v-if="val.state=='4'" class="gray moneyBig">{{val.prices| formatNumber}}元</span>
                                <span v-if="val.state=='1'" class="green moneyBig">{{val.prices| formatNumber}}元</span>
                                
                            </p>
                            <div v-if="val.state=='1'" class="item_money_time">
                                <p>预计{{val.time}}开始</p>
                                <p class="greenBtn">即将开始</p>
                            </div>
                            <div v-if="val.state=='2'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">正在进行</p>
                            </div>
                            <div v-if="val.state=='3'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已成交</p>
                            </div>
                            <div v-if="val.state=='4'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="grayBtn">已流拍</p>
                            </div>
                            <div v-if="val.state=='5'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已撤拍</p>
                            </div>
                            <div v-if="val.state=='6'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">等待拍卖师</p>
                            </div>
                            </div>  
                            <div class="item_bottom clearfix">
                                <div>
                                <span>{{val.viewcount}}次围观</span>
                                </div>
                                <!-- <el-divider direction="vertical"></el-divider> -->
                                <div>
                                <span>{{val.history_count}}次出价</span>
                                </div>
                                <!-- <el-divider direction="vertical"></el-divider> -->
                                <div>
                                    <i class="el-icon-star-on" :class="[val.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar(val.id)"></i>
                                    <span>关注</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
            <div class="pageTotal">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filterObj.page"
                :page-sizes="[12,20, 30, 40,50]" :page-size="filterObj.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination> 
            </div>
             
        </div> 
    </div>
</template>
<script>
import {getUserInfoID,timestampToTime} from '@/utils/auth'
import {LotsTypeList,AreaList,lotsList,clickFollow} from '@/api/interface'
 export default {
    data() {
      return {
        uid:'',
        total: 1,
        lotsTypeList:[], //标的类型
        lotsTypeListChildren:[],  //标的类型子元素
        areaList:[], // 标的所在地
        areaListChildren:[], // 标的所在地子元素
        typeAllShow:false,
        adressAllShow:false,
        lotsLX:null,
        lotsChildLX:null,
        lotsAreaStyle:null,
        AreaChildStyle:null,
        stateFoucs:'stateFoucs',
        picSamll:'',
        picBig:'',
        radio2:'1',
        filterObj:{
            page:1,
            limit:12,
            type_pid:'',
            type_id:'',
            location_pid:'',
            location_id:'',
            keywords:'',
            price:'',
            history_count:'',
            minprice:'',
            maxprice:'',
        },
        emptyShow:false,
        lotsCardList:[],
        colorYe:'',
        description:'',
      };
    },
    watch:{
        filterObj:{
            handler(val){
                // console.log('obj',val);
                let newObj = Object.assign({uid:this.uid,state:'3'}, val);
                this.getLotsCardList(newObj);
            },
            deep: true
        }
    },
    filters: {
        formatNumber(value) {
            if (value >= 10000) {
            return (value / 10000).toFixed(2) + '万';
            }
            return value;
        }
    },
    created(){
    var userInfo = getUserInfoID();
      if(userInfo){
        var info = JSON.parse(userInfo);
        // this.levelType = info.level;
        this.uid = info.id;
      }
      this.getLotsTypeList();
      let obj = Object.assign({uid:this.uid,state:'3'}, this.filterObj);
      this.getLotsCardList(obj);
    },
    methods: {
      getLotsTypeList(){
          LotsTypeList().then((res) => {
              this.lotsTypeList=res.data;
              // console.log(res.data);
          });
          AreaList().then(res=>{
              // console.log(res.data);
              this.areaList=res.data;
          }); 
      },
      getLotsCardList(newObj){
          lotsList(newObj).then(res=>{
              if(res.code == 200){
                this.emptyShow = false;
                // console.log('222',res)
                  res.data.forEach(item => {
                     var time = timestampToTime(item.time);
                     item.time = time.ymdhms;
                  })
                  this.lotsCardList=res.data;
                  this.total = res.count;
              }else{
                  this.emptyShow = true;
                  this.description = res.msg;
                  this.lotsCardList=[];
              } 
          }).catch(err =>{
            this.emptyShow = true;
            this.description = err.msg;
            this.lotsCardList=[];
          });
        },
      // ------标的类型--------
      typeAll(){
        this.lotsLX =null;
        this.typeAllShow = false;
        this.filterObj.type_pid='';
        this.filterObj.type_id='';
      },
      showLotsChildren(children,pid,index){
        this.lotsTypeListChildren = children;
        this.lotsLX = index;
        this.typeAllShow = true;
        this.filterObj.type_pid =pid;
      },
      typeChildAll(){
        this.lotsChildLX = null;
        this.filterObj.type_id='';
      },
      lotsTypeChild(id,index){
        this.filterObj.type_id=id;
        this.lotsChildLX = index;
      },
      // -------标的所在地-----------
      adressAll(){
        this.adressAllShow=false;
        this.lotsAreaStyle = null;
        this.filterObj.location_pid='';
        this.filterObj.location_id='';
      },
      showAreaChildren(children,pid,index){
        this.areaListChildren=children;
        this.adressAllShow = true;
        this.lotsAreaStyle = index;
        this.filterObj.location_pid =pid;
      },
      adressChildAll(){
        this.filterObj.location_id='';
        this.AreaChildStyle = null;
      },
      lotsAreaChild(id,index){
        this.filterObj.location_id=id;
        this.AreaChildStyle = index;
      },
      // -------价格:上升 下降------------
      uptrendPic(){
        this.radio2 = '1';
        this.filterObj.price = 'asc';
      },
      declinePic(){
        this.radio2 = '1';
        this.filterObj.price = 'desc';
      },
      // -------出价次数:升序 降序----------
      uptrendNum(){
        this.radio2 = '2';
        this.filterObj.history_count = 'asc';
      },
      declineNum(){
        this.radio2 = '2';
        this.filterObj.history_count = 'desc';
      },
      //星星关注
      attentionStar(id){
      clickFollow({id:this.uid,lots_id:id}).then(res =>{
            if(res.code == 200){
                let obj = Object.assign({uid:this.uid,state:'3'}, this.filterObj);
                this.getLotsCardList(obj);
            }
        });
    },
    routeDetail(val){
        let {href}= this.$router.resolve({
            path: '/lots/detail',   // 这里写的是要跳转的路由地址
            query: {lotsId:val.id,auctionid:val.auction_id}// 这里写的是页面参数
        });
        window.open(href, '_blank');
    },
      // ---------分页
      handleSizeChange(val) {
        this.filterObj.limit = val;
      },
      //----- 分页---------
      handleCurrentChange(val) {
       this.filterObj.page = val;
      }


    }
  }
</script>


<style scoped lang="less">
.caseLibrary{
    min-height: 100vh;
  .stateFoucs{
        background-color: #cc0000;
        color: #fff;
    }
  .lots_type{
      margin: 20px 0px;
        .table{
            background: #fafafa;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            font-size: 12px;
            .tr_border{
                display: flex;
                
                min-height: 46px;
            }
            .tr_border:first-child{
              border-bottom: 1px solid #e6e6e6;
            }
            .td_type{
                width: 90px;
                border-right: 1px solid #e6e6e6;
                text-align: center;
                padding-top: 14px;
            }
            .td_all{
                display: flex;
                color: #3d4246;
                padding: 10px;
                .td_all_val{
                    text-align: center;
                    cursor: pointer;
                    padding: 4px 10px;
                    margin: 0px 8px;
                    border-radius: 14px;
                    width: 24px;
                    height: 16px;
                    line-height: 16px;
                    background-color: #cc0000;
                    color: #fff;
                    
                }
                .ta_all_item{
                    width: 982px;
                    .all_item_value{
                        width: 100%;
                        background: #e6e6e6;
                        display: flex;
                        border-radius: 6px;
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap:wrap;
                            &:after{
                                content: '';
                                flex: auto;
                                // width: 90px;
                            }
                            li{
                                .all_li_span{
                                    background-color: #cc0000;
                                    color: #fff;
                                }
                                // width: 90px;
                                span{
                                    display: inline-block;
                                    padding: 4px 10px;
                                    margin: 4px 6px;
                                    border-radius: 14px;
                                }
                                span:hover{
                                    background-color: #cc0000;
                                    color: #fff;
                                }
                                span:focus{
                                    background-color: #cc0000;
                                    color: #fff;
                                }
                            }
                        }
                    }

                    .all_item_ul{
                      display: flex;
                      justify-content: space-between;
                      flex-wrap:wrap;
                      &:after{
                          content: '';
                          flex: auto;
                          // width: 90px;
                      }
                      li{
                          // width: 90px;
                          span{
                              display: inline-block;
                              padding: 2px 10px;
                              margin: 1px 6px;
                              border-radius: 14px;
                          }
                          span:hover{
                              background-color: #cc0000;
                              color: #fff;
                          }
                      }
                  }
                }
            }
            .tr4{
                display: flex;
            }  
        } 
    }


   
    // card
    .card{
        .pai-item-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,278px);
            grid-gap: 20px;
        .link_wrap{
            position: relative;
            display: inline-block;
            width: 280px;
            height: 355px;
            text-decoration: none;
            // .link_wrap:hover{
            // border: 2px solid #67C23A;
            // }
            .item_card{
                border-radius: 8px;
            .image {
                height: 190px;
                .lot_pic{
                    display: block;
                    width: 100%;
                    height: 190px;
                    /deep/.el-image__inner{
                        object-fit: cover;
                    }
                }
            }
            .item_content{
                padding-left: 12px;
                padding-right: 12px;
                padding-top: 8px;           
                .item_title{
                    height: 56px;
                    font-size: 18px;
                    .in_item_title{
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                
                }
                .item_money{
                font-size: 14px;
                color: rgb(153, 153, 153);
                .item_money_time{
                    p{
                    display: inline-block;  
                    }
                    
                    p:last-of-type{
                    font-size: 12px;
                    font-weight: 400;
                    position: absolute;
                    right: 0px;
                    padding: 2px 8px 2px 12px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 12px 0px 0px 12px;
                    color: #fff;
                    }
                }
                }
                .item_money{
                p{
                    margin-bottom: 10px;
                }
                }
                .item_bottom{
                    height: 40px;
                    font-size: 12px;
                    line-height: 40px;
                    border-top: 1px solid rgb(237, 237, 237);
                    display: flex;
                    justify-content: space-between;
                    color: rgb(153, 153, 153);
                }
                .moneyBig{
                    font-size: 20px;
                    font-weight: 400;
                    margin-left: 4px;
                    margin-top: 4px;
                }

            }
            }
            .item_card:hover{
                border: 1px solid #cc0000;
            }
        }
        }
        .pageTotal{
          margin: 20px 0;
          text-align: center;
        }
    }
}
  

</style>